import React, { useEffect, useState } from "react";
import axios from "axios";
import {
  Table,
  Button,
  Space,
  Modal,
  message as antdMessage,
  Row,
  Col,
  Input,
} from "antd";
interface ListRawState {
  id: string;
  tel: string;
  address: string;
  nickname: string;
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListRawState[]>([]);
  const [selectedIDS, setSelectedIDS] = useState<string[]>([]);

  const fetchList = async () => {
    const resp = await axios.get("/api/list");
    setList(resp.data.data);
  };

  // 删除事件
  const handleDelete = (id: string) => {
    Modal.confirm({
      title: "警告",
      content: "确认要删除该项数据吗？",
      async onOk() {
        // 调用请求删除接口
        const resp = await axios.delete("/api/list", { params: { id } });
        const { code, message } = resp.data;
        if (code === 200) {
          antdMessage.success(message);
          fetchList();
        }
      },
      onCancel() {},
      okText: "确认",
      cancelText: "取消",
    });
  };

  const columns = [
    {
      title: "id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "昵称",
      dataIndex: "nickname",
      key: "nickname",
    },
    {
      title: "电话",
      dataIndex: "tel",
      key: "tel",
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "编辑",
      dataIndex: "id",
      // 自定义渲染
      render(id: string, row: ListRawState) {
        return (
          <Space>
            <Button type="primary" onClick={() => openModal(row)}>
              编辑
            </Button>
            <Button type="primary" danger onClick={() => handleDelete(id)}>
              删除
            </Button>
          </Space>
        );
      },
    },
  ];

  useEffect(() => {
    fetchList();
  }, []);

  const [isModalOpen, setIsModalOpen] = useState(false);

  const [item, setItem] = useState({
    id: "1",
    nickname: "张三",
    tel: "123123123123123",
    address: "上海八维宏烨校区",
  } as ListRawState);

  const handleOk = async () => {
    setIsModalOpen(false);
    const resp = await axios.put(`/api/list/${item.id}`, item);
    const { code, message } = resp.data;
    if (code === 200) {
      antdMessage.success(message);
      fetchList();
    }
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const openModal = (row: ListRawState) => {
    setIsModalOpen(true);

    setItem(row);
  };

  return (
    <div>
      {selectedIDS.length > 0 && (
        <Button
          type="primary"
          danger
          onClick={() => handleDelete(selectedIDS.join(","))}
        >
          删除所选
        </Button>
      )}
      <Table
        rowSelection={{
          onChange(selectedRowKeys) {
            setSelectedIDS(selectedRowKeys as string[]);
          },
        }}
        rowKey="id"
        dataSource={list}
        columns={columns}
      ></Table>

      <Modal
        title="Basic Modal"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Row style={{ marginBottom: 10 }}>
          <Col span={2}>ID: </Col>
          <Col span={22}>
            <Input
              disabled
              value={item.id}
              onChange={(e) => setItem({ ...item, id: e.target.value })}
            ></Input>
          </Col>
        </Row>
        <Row style={{ marginBottom: 10 }}>
          <Col span={2}>昵称: </Col>
          <Col span={22}>
            <Input
              value={item.nickname}
              onChange={(e) => setItem({ ...item, nickname: e.target.value })}
            ></Input>
          </Col>
        </Row>
        <Row style={{ marginBottom: 10 }}>
          <Col span={2}>电话: </Col>
          <Col span={22}>
            <Input
              value={item.tel}
              onChange={(e) => setItem({ ...item, tel: e.target.value })}
            ></Input>
          </Col>
        </Row>
        <Row style={{ marginBottom: 10 }}>
          <Col span={2}>地址: </Col>
          <Col span={22}>
            <Input
              value={item.address}
              onChange={(e) => setItem({ ...item, address: e.target.value })}
            ></Input>
          </Col>
        </Row>
      </Modal>
    </div>
  );
};

export default Index;
